<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>css样式绑定</title>
	<style>
		.active{
			text-decoration: underline;
		}
		.text-danger{
			font-weight: bold;
		}
	</style>
  <script src="/js/vue.js"></script>
</head>
<body>
  <div id="app">
		<!-- css样式绑定分几种 -->
		<!-- 1. 对象语法 传对象 布尔值 -->
		<div :class="{'active':true,'text-danger':true}">Hello</div>

		<!-- 2. 数组语法  传数组进去 字符串 -->
		<div :class="['active','text-danger']" >Shane</div>

		<!-- 3.inline statement 直接写入的表达式 通过三元表达式进行控制 xx?xx:xx  -->
		<div :class="[isActive ? 'active':'',isDanger ? 'text-danger':'']">Hello Tom</div>

		<!-- 改变csss样式除了改变class 还可以直接对style进行值的绑定 -->
		 <!-- 1 对象语法 -->
		 <div :style="{'color':'green'}">Hello Kitty</div>
		 <div :style="cssObj">Hello Kitty</div>

		 <!-- 2. 数组语法 数组里面可以放多个对象来实现效果-->
		 <div :style="[cssObj,cssObje2]">Hello Kitty</div>
  </div>
<br>
  <script>
    let app = new Vue({
      el:"#app",
      data:{ 
        msg:'hello world',
				isActive:true,
				isDanger:false,
				cssObj:{
					color:'blue',
					'font-size':'30px'
				},
				cssObje2:{
					'text-decoration':'underline'
				}
      }
    })
  </script>
</body>
</html>